<template>
  <div class="chart">
    <div ref="chart" :style="{ height: height, width: width }" />
  </div>
</template>
<script>
import * as echarts from 'echarts'

import _ from 'lodash'
export default {
  name: 'ChartView',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartOption: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      default: 'canvas'
    }
  },
  data() {
    return {
      chart: null,
      resizeFn: null
    }
  },
  watch: {
    chartOption: {
      deep: true,
      handler(newVal) {
        this.setOptions(newVal)
      }
    }
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      this.resizeFn = _.debounce(() => {
        this.resizeHandler()
      }, 800)
      window.addEventListener('resize', this.resizeFn)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.resizeFn)
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    /**
     * 页面 resize触发事件
     */
    resizeHandler() {
      // 清除chart
      this.clearChart()
      // 调用echart的resize
      this.resize()
      // 再次渲染echart
      this.$nextTick(() => {
        this.initChart()
      })
    },
    /**
     * 渲染echart
     */
    initChart() {
      this.chart = echarts.init(this.$refs.chart, '', {
        renderer: this.type
      })
      this.chart.setOption(this.chartOption)
    },
    /**
     * 设置option
     */
    setOptions(option) {
      if (!this.chart) {
        return
      }
      this.chart.setOption(option)
    },
    /**
     *  清除chart
     */
    clearChart() {
      if (!this.chart) {
        return
      }
      this.chart.clear()
    },
    /**
     * echart resize
     */
    resize() {
      if (!this.chart) {
        return
      }
      this.chart.resize()
    }
  }
}
</script>
<s